<template>
  <div>
    <div>
      <label for="lab" class="labIput">
        <input
          type="file"
          id="lab"
          ref="hiddenfile"
          accept="image/*"
          @change="readQr"
          class="hiddenInput"
        />
        选择二维码图片
      </label>
    </div>
    <img v-if="imgSrc" id="fg" :src="imgSrc" />
    <div>
      <el-input
        v-model="qrText"
        :rows="4"
        type="textarea"
        placeholder="..."
        :readonly="true"
        style="width: 400px; margin-top: 20px"
      />
    </div>
  </div>
</template>
 
<script setup>
import { ref } from "vue";
import qrcodeParser from "qrcode-parser";
//图片的src
const imgSrc = ref("");
//读取到的数据
const qrText = ref("...");
//读取exif
const readQr = (e) => {
  let file = e.target.files[0];
  let reader = new FileReader();
  reader.readAsDataURL(file);
  reader.onload = () => {
    //显示图片
    imgSrc.value = reader.result;
    //解析二维码图片
    qrcodeParser(file)
      .then((res) => {
        console.log(res);
        qrText.value = res;
      })
      .catch((err) => {
        qrText.value = "图片中未解析到数据";
        console.log("error", err);
        // qrText.value = "图片中未解析到数据";
        ElMessage({
        showClose: true,
        message: '图片中未解析到数据,请重新再试！',
        type: "error",
      })
      });
  };
};
</script>
<style lang="less" scoped>
.hiddenInput {
  display: none;
}
/dee/ .el-textarea__inner {
  box-shadow: 0 0 0 1px #161616 inset;
}
#fg{
    width: 200px;
    margin: 10px 0 10px 100px;
}
.labIput {
  display: block;
  width: 6.5rem;
  height: 30px;
  border-radius: 5px;
  margin-left: 10px;
  z-index: 1;
  position: relative;
  font-size: 13px;
  font-family: inherit;
  color: white;
  padding: 0.3em 0.5em;
  outline: none;
  border: none;
  background-color: hsl(236, 32%, 26%);
  overflow: hidden;
  transition: color 0.4s ease-in-out;
  text-align: center;
  line-height: 30px;
}

.labIput::before {
  content: "";
  z-index: -1;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  background-color: #3cefff;
  transform-origin: center;
  transform: translate3d(-50%, -50%, 0) scale3d(0, 0, 0);
  transition: transform 0.45s ease-in-out;
}

.labIput:hover {
  cursor: pointer;
  color: #161616;
}

.labIput:hover::before {
  transform: translate3d(-50%, -50%, 0) scale3d(15, 15, 15);
}
</style>